<template>
  <div>
    <tipTitle :cssClass="{ 'background': 'linear-gradient(90deg, rgb(3, 103, 174) 0%, rgba(3, 102, 174, 0) 100%)', 'height': '40.69px' }">
      <template #title>
        <a-select v-model:value="month" style="width: 100px;margin-left: 10px"
          @change="handleChange" size="small">
          <a-select-option :value="item.month" v-for="item in list" :key="item">
            {{ item.month }}
          </a-select-option>
        </a-select>
        <a-button type="text" style="color:#fff;" @click="openTable">查看数据</a-button>
      </template>
    </tipTitle>
  <Content class="pieBody">
    <div style="color:white;position: absolute;top: -30px;right:30px;font-size: 20px;font-weight: bold;">
      <a-tooltip>
        <template #title>订单商品维度</template>
        <QuestionCircleOutlined />
      </a-tooltip>
    </div>
    <div class="pie">
      <el-progress type="circle" :width="179" :stroke-width="13" :color="'#18F8FE'"
        :percentage="finishObj.order_fill_rate || 0">
        <template #default>
          <span style="font-size: 16px;color: #fff;">订单完成率</span>
          <br />
          <br />
          <span style="font-size: 32px;color: #18F8FE;">{{(finishObj.order_fill_rate || 0) + '%'}}</span>
        </template>
      </el-progress>
      <el-progress type="circle" :width="179" :stroke-width="13" :color="'#18F8FE'"
        :percentage="fulfillObj.order_fulfillment_rate || 0">
        <template #default>
          <span style="font-size: 16px;color: #fff;">订单及时率</span>
          <br />
          <br />
          <span style="font-size: 32px;color: #18F8FE;">{{(fulfillObj.order_fulfillment_rate || 0) + '%'}}</span>
        </template>
      </el-progress>
    </div>
  </Content>
  </div>
</template>
<script setup>
import Content from './component/content.vue'
import tipTitle from "@/components/bigData/component/title.vue"
import { onMounted,ref } from 'vue'
import {orderFillRate, orderFulfillmentRate} from "@/api/bigData/pie.js";
import dayjs from 'dayjs'
const list = ref([])
const list1 = ref([])
const month = ref('')
const finishObj = ref({})
const fulfillObj = ref({})
const emit = defineEmits(['openTable'])
const openTable = () => {
  emit('openTable')
}
const selectMonth = (selected) => {
  try{
    list.value.forEach(item => {
      if(item.month === selected){
        finishObj.value = item
      }
    })
    list1.value.forEach(item => {
      if(item.month === selected){
        fulfillObj.value = item
      }
    })
  }catch (e){
    console.log(e)
  }
}
const handleChange = (e) => {
  selectMonth(e)
}
const init = async () => {
  const res = await orderFillRate({})
  const res1 = await orderFulfillmentRate({})
  list.value = res.result.records.sort((a, b) => dayjs(a.month).valueOf() - dayjs(b.month).valueOf())
  list1.value = res1.result.records
  list.value.forEach(item => {
    if(!!item.order_fill_rate) {
      item.order_fill_rate = parseFloat(item.order_fill_rate.split("%").join(""))
    }else {
      item.order_fill_rate = 0
    }
  })
  list1.value.forEach(item => {
    if(!!item.order_fulfillment_rate) {
      item.order_fulfillment_rate = parseFloat(item.order_fulfillment_rate.split("%").join(""))
    }else {
      item.order_fulfillment_rate = 0
    }
  })
  selectMonth(month.value)
}
onMounted(async () => {
  month.value = dayjs().subtract(1, 'month').format('YYYY-MM')
  await init()
})
defineExpose({
  init
})
</script>
<style scoped lang="less">
.pieBody {
  width: 460.98px;
  height: 290.88px;
  .pie{
    margin-top: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
:deep(.ant-progress-text){
  color: #fff!important;
}
:deep(.ant-select-selector){
  background-color: #093563!important;
  color: #fff!important;
}
:deep(.ant-select-arrow){
  color: #fff!important;
}
</style>
